<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="org.example.pojo.User"%>
<%@ page import="org.example.pojo.BattleData"%>
<%
    User user = (User) request.getAttribute("user");
    BattleData battleData = (BattleData) request.getAttribute("battleData");
    if (battleData == null) { battleData = new BattleData(); }
%>


<head>
    <title>index</title>
</head>
<html>
<body>


    <div class="content">
        <h1 class="title">欢迎用户<%= user.getName() %>!</h1>
        <table border="0" style="text-align: left;" cellpadding="5px">
            <tr>
                <th>总对局数: </th>
                <td><%= battleData.getTotalBattle() %></td>
                <th>胜利场数: </th>
                <td><%= battleData.getTotalVictory() %></td>
                <th>总杀敌数: </th>
                <td><%= battleData.getTotalKill() %></td>
            </tr>
            <tr>
                <th>总助攻数: </th>
                <td><%= battleData.getTotalAssist() %></td>
                <th>总死亡数: </th>
                <td><%= battleData.getTotalDeath() %></td>
                <th>kd: </th>
                <td><%= battleData.getKd() %></td>
            </tr>
            <tr>
                <th>胜率: </th>
                <td><%= battleData.getOdds() * 100 %>%</td>
            </tr>
        </table>
        <div>
            <div class="info" style="display: none;">
                <h3>暂无数据...</h3>
                <div class="tables" style="display: none;">
                    <table class="info-table" border="0" style="display: none; text-align: left; width: 100%; border: 1px solid #000;" cellpadding="5" cellspacing="0">
                        <tr>
                            <th colspan="4">地图名: <span class="map-name"></span></th>
                            <td colspan="4">时间: <span class="date"></span></td>
                        </tr>
                        <tr>
                            <th colspan="4" >蓝队</th>
                            <th colspan="4" >红队</th>
                        </tr>
                        <tr>
                            <th style="font-size: 12px;">用户名</th>
                            <th style="font-size: 12px;" >杀敌/助攻/死亡</th>
                            <th style="font-size: 12px;" >kda</th>
                            <th style="font-size: 12px;" >金钱</th>
                            <th style="font-size: 12px;">用户名</th>
                            <th style="font-size: 12px;" >杀敌/助攻/死亡</th>
                            <th style="font-size: 12px;" >kda</th>
                            <th style="font-size: 12px;" >金钱</th>
                        </tr>
                        <tr>
                            <th class="table-data-bottom" colspan="8" style="text-align: center;">失败</th>
                        </tr>
                    </table>
                </div>
            </div>
            <a href="javascript:showInfo()" class="show-info">点击查看战绩</a>
            <a href="javascript:closeInfo()" class="close-info" style="display: none;">关闭战绩</a>
        </div>
    </div>
</body>
<script type="text/javascript">
    function showInfo() {
        document.querySelector('.close-info').style.display='inline';
        document.querySelector('.show-info').style.display='none';
        document.querySelector('.info').style.display='block';

        let battleInfoXHR = new XMLHttpRequest();
        battleInfoXHR.onreadystatechange = function() {
            if(battleInfoXHR.readyState === 4) {
                if (battleInfoXHR.status === 200) {
                    showTableInfo(battleInfoXHR.responseText)
                } else {
                    alert('网络异常');
                }
            }
        }
        battleInfoXHR.open('GET', 'app/battle?user=<%= user.getName() %>');
        battleInfoXHR.send();
    }

    function showTableInfo(jsonText) {
        let resp = JSON.parse(jsonText);
        if (resp.code === 0) {
            if (resp.data.length <= 0) {
                return;
            }
            let tables = document.querySelector('.tables');
            tables.style.display = 'block';
            resp.data.forEach(item => {
                let table = document.querySelector('.info-table').cloneNode(true);
                table.style.display = 'block';
                tables.appendChild(table);
                item.blue = [];
                item.red = [];
                item.teams.forEach(user => {
                    if (user.team == false) {
                        item.red.push(user);
                    } else { item.blue.push(user); }
                })
                for (let i=0; i<item.blue.length; i++) {
                    insertRow(table, 3, item.blue[i], item.red[i]);
                }
                table.querySelector('.map-name').innerText = item.mapName;
                table.querySelector('.date').innerText = item.date;
                table.querySelector('.table-data-bottom').innerText = item.victory ? '蓝队胜利' : '红队胜利';
            });
            return;
        }
        alert('接受到的数据为: ' + jsonText + '\n\n' + resp.msg);
        // alert(resp.msg);
        location.reload();
    }

    function insertRow(table, index, blueUser, redUser) {
        let row = table.insertRow(index);

        let user = blueUser;
        for (let i=0; i<2; i++) {
            // name
            let col = document.createElement('td');
            col.innerText = user.name;
            row.appendChild(col);

            // kill&assist&death
            col = document.createElement('td');
            col.innerText = `${user.kill}/${user.assists}/${user.death}`;
            row.appendChild(col);

            // kda
            col = document.createElement('td');
            col.innerText = eval(user.kill)/eval(user.death);
            row.appendChild(col);

            // money
            col = document.createElement('td');
            col.innerText = user.money;
            row.appendChild(col);
            user = redUser;
        }
    }

    function closeInfo() {
        document.querySelector('.show-info').style.display='inline';
        document.querySelector('.close-info').style.display='none';
        document.querySelector('.info').style.display='none';
        let table = document.querySelector('.info-table').cloneNode(true);
        let tables = document.querySelector('.tables');
        tables.innerHTML = '';
        tables.appendChild(table);
    }
</script>
<style type="text/css">
    .content{
        margin: auto;
        width: 70%;
    }
</style>
</html>